<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <el-card shadow="never">
        <el-button
          type="warning"
          style="width: 125px;"
          @click="openAdd"
        >添加工作模式</el-button>
        <el-table
          :data="workHistoryList"
          style="width: 100%;margin-top: 30px;"
        >
          <el-table-column
            prop="id"
            label="工作模式编号"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="工作模式"
          ></el-table-column>
          <el-table-column
            prop="workPatternTypeDesc"
            label="类型"
          ></el-table-column>
          <el-table-column
            prop="workDate"
            label="工作日期"
          ></el-table-column>
          <el-table-column
            label="工作时间"
          >
            <template #default="scope">
              <span>{{ ((scope.row.workEndMinute1 - scope.row.workStartMinute1) / 60).toFixed(2) }}小时</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="editWorkArrange(scope.row)"
              >编辑</el-button>
              <span>|</span>
              <el-button
                size="mini"
                type="text"
                style="color: #F56C6C;"
                @click="deletWorkArrange(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          style="margin-top: 20px;text-align: center;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <template slot="title">
        <span v-if="!addWorkHistoryForm.id">新增工作模式</span>
        <span v-if="addWorkHistoryForm.id">编辑工作模式</span>
      </template>
      <el-tabs
        v-if="!addWorkHistoryForm.id"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="礼拜制"
          name="first"
        >
          <el-form
            ref="addWorkHistoryForm1"
            :model="addWorkHistoryForm"
            label-width="100px"
          >
            <el-form-item label="工作模式名称">
              <el-input v-model="addWorkHistoryForm.name"></el-input>
            </el-form-item>
            <el-form-item label="连续工作天数">
              <el-checkbox
                v-model="addWorkHistoryForm.monday"
                label="周一"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.tuesday"
                label="周二"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.wednesday"
                label="周三"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.thursday"
                label="周四"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.friday"
                label="周五"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.saturday"
                label="周六"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.sunday"
                label="周日"
                true-label="1"
                false-label="2"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
                @change="timeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="连续制"
          name="second"
        >
          <el-form
            ref="addWorkHistoryForm2"
            :model="addWorkHistoryForm"
            label-width="100px"
          >
            <el-form-item label="工作模式名称">
              <el-input v-model="addWorkHistoryForm.name"></el-input>
            </el-form-item>
            <el-form-item label="连续工作天数">
              <span>上</span>
              <el-input
                v-model="addWorkHistoryForm.workDayNum"
                placeholder="请输入"
                style="width: 30%;"
              >
                <template slot="suffix">天</template>
              </el-input>
              <span>休</span>
              <el-input
                v-model="addWorkHistoryForm.restDayNum"
                placeholder="请输入"
                style="width: 30%;"
              >
                <template slot="suffix">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
                @change="timeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-tabs
        v-if="addWorkHistoryForm.id"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-if="addWorkHistoryForm.workPatternType === 1"
          label="礼拜制"
          name="first"
        >
          <el-form
            ref="addWorkHistoryForm1"
            :model="addWorkHistoryForm"
            label-width="100px"
          >
            <el-form-item label="工作模式名称">
              <el-input v-model="addWorkHistoryForm.name"></el-input>
            </el-form-item>
            <el-form-item label="连续工作天数">
              <el-checkbox
                v-model="addWorkHistoryForm.monday"
                label="周一"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.tuesday"
                label="周二"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.wednesday"
                label="周三"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.thursday"
                label="周四"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.friday"
                label="周五"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.saturday"
                label="周六"
                true-label="1"
                false-label="2"
              ></el-checkbox>
              <el-checkbox
                v-model="addWorkHistoryForm.sunday"
                label="周日"
                true-label="1"
                false-label="2"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
                @change="timeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          v-if="addWorkHistoryForm.workPatternType === 2"
          label="连续制"
          name="second"
        >
          <el-form
            ref="addWorkHistoryForm2"
            :model="addWorkHistoryForm"
            label-width="100px"
          >
            <el-form-item label="工作模式名称">
              <el-input v-model="addWorkHistoryForm.name"></el-input>
            </el-form-item>
            <el-form-item label="连续工作天数">
              <span>上</span>
              <el-input
                v-model="addWorkHistoryForm.workDayNum"
                placeholder="请输入"
                style="width: 30%;"
              >
                <template slot="suffix">天</template>
              </el-input>
              <span>休</span>
              <el-input
                v-model="addWorkHistoryForm.restDayNum"
                placeholder="请输入"
                style="width: 30%;"
              >
                <template slot="suffix">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
                @change="timeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="warning"
          @click="addWorkHistory"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, addWorkHistory, updateWorkHistory, deleteWorkHistory } from '@/api/transit'
export default {
  data () {
    return {
      page: {
        page: 1,
        pageSize: 10
      },
      workHistoryList: [],
      counts: 0,
      dialogVisible: false,
      activeName: 'first',
      addWorkHistoryForm: {
        friday: '0',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        saturday: '0',
        sunday: '0',
        name: '',
        restDayNum: '',
        workDayNum: '',
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: ''
      },
      timeArr: ['09:00', '18:00']
    }
  },
  mounted () {
    this.getWorkHistoryList()
  },
  methods: {
    async getWorkHistoryList() {
      const res = await workHistoryList(this.page)
      this.workHistoryList = res.data.items
      this.counts = +res.data.counts
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getWorkHistoryList()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getWorkHistoryList()
    },
    timeChange(val) {
      const newArr = val[0].split(':')
      const _newArr = val[1].split(':')
      const startH = +newArr[0]
      const startM = +newArr[1]
      const endH = +_newArr[0]
      const endM = +_newArr[1]
      this.addWorkHistoryForm.workStartMinute1 = startH * 60 + startM
      this.addWorkHistoryForm.workEndMinute1 = endH * 60 + endM
    },
    handleClick() {
      this.addWorkHistoryForm = {
        friday: '0',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        saturday: '0',
        sunday: '0',
        name: '',
        restDayNum: '',
        workDayNum: '',
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: ''
      }
    },
    async addWorkHistory() {
      if (!this.addWorkHistoryForm.id) {
        if (this.activeName === 'first') {
          this.addWorkHistoryForm.workPatternType = '1'
        } else {
          this.addWorkHistoryForm.workPatternType = '2'
        }
        const res = await addWorkHistory(this.addWorkHistoryForm)
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.handleClose()
          this.getWorkHistoryList()
        } else {
          this.$message.warning(res.msg)
        }
      } else {
        const res = await updateWorkHistory(this.addWorkHistoryForm)
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.handleClose()
          this.getWorkHistoryList()
        } else {
          this.$message.warning(res.msg)
        }
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.addWorkHistoryForm = {
        friday: '0',
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        saturday: '0',
        sunday: '0',
        name: '',
        restDayNum: '',
        workDayNum: '',
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: ''
      }
    },
    openAdd() {
      this.dialogVisible = true
    },
    editWorkArrange(row) {
      this.addWorkHistoryForm = row
      this.dialogVisible = true
      if (this.addWorkHistoryForm.workPatternType === 1) {
        this.activeName = 'first'
      } else if (this.addWorkHistoryForm.workPatternType === 2) {
        this.activeName = 'second'
      }
    },
    async deletWorkArrange(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteWorkHistory(id)
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.getWorkHistoryList()
        } else {
          this.$message.warning(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}

::v-deep .el-tabs__item {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #4E5969;
    line-height: 24px;
    font-weight: 400;
  }

  ::v-deep .is-active {
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    color: #20232A;
    line-height: 24px;
    font-weight: 600;
  }

  ::v-deep .el-tabs__active-bar {
    background: #E15536;
    border-radius: 4px 4px 0px 0px;
  }
</style>
